<template>
  <div class="container">
    <!--  主题内容标题   -->
    <div class="flex contain-header">
      <div class="contain-title">帖子管理</div>
      <div class="flex contain-left" @click="addPost">
        <div><icon-svg name="iconadd-dashboard" class="nav-icon" /></div>
        <div class="add">新增</div>
      </div>
    </div>
    <!--  查询    -->
    <a-form class="form" :form="form" @submit="handleSearch">
      <a-row :gutter="24">
        <a-col
            :span="24"
            class="margin-bottom"
        >
          <div class="flex-center">
            <a-col :span="2">
              标题：
            </a-col>
            <a-col :span="4">
              <a-input placeholder="请输入标题" name="title" v-model="title"/>
            </a-col>
            <a-col :span="2">
              发布人：
            </a-col>
            <a-col :span="4">
              <a-input placeholder="请输入发布人" name="title" v-model="publisher"/>
            </a-col>
            <a-col :span="2">
              时间：
            </a-col>
            <a-col :span="6">
              <a-date-picker @change="onChange" format="YYYY/MM/DD" v-model="date"/>
            </a-col>
            <a-col :span="3">
              <a-button type="primary" html-type="submit" icon="search" :style="{'background-color': '#54aef2',border: 'none'}">
                查询
              </a-button>
            </a-col>
          </div>
        </a-col>
      </a-row>
    </a-form>

    <!--  表格头部标签页  -->
    <div class="tag-page">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="全部">
          <a-table :columns="columns" :data-source="data" :loading="isLoading" :pagination="pagination" bordered class="column">
            <!--    表格操作列内容        -->
            <template slot="isAnonymous" slot-scope="text, record, index">
              {{ text ? '是' : '否' }}
            </template>
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
               <span class="oper">
                 <div class="flex icon-flex">
<!--                    <a @click="() => editPost(record,text)" class="flex edit"><icon-svg name="iconbianji" class="icon-oper" />编辑</a>-->
                    <a-popconfirm title="是否确定删除?" cancelText="取消" okText="确定" @confirm="() => deletePost(record)">
                      <a class="flex delete"><icon-svg name="iconshanchu" class="icon-oper" />删除</a>
                    </a-popconfirm>
                 </div>
                </span>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!--  新增弹窗  -->
    <!--    <action-modal :modalVisible.sync="isShowModal" :data.sync="modalData" :title="modalTitle"></action-modal>-->
  </div>
</template>

<script>
import {getUserPostList,deletePost} from '@/api'
// import ActionModal from "../../components/Modal/ActionModal";
const columns = [
  {
    title: '标题',
    dataIndex: 'postTitle',
    width: '19%',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '发布人',
    dataIndex: 'postPerson',
    width: '16%',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '内容',
    dataIndex: 'postText',
    width: '17%',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '热度',
    dataIndex: 'postHot',
    width: '9%',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '是否匿名',
    dataIndex: 'isAnonymous',
    width: '9%',
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'isAnonymous' },
  },
  {
    title: '发布时间',
    dataIndex: 'createTime',
    width: '17%',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    scopedSlots: { customRender: 'operation' },
  },
];
export default {
  name: "AdminInvitation",
  data() {
    return{
      label: [
        {
          title: '标题',
          placeholder: '请输入标题',
          name: 'c_name'
        }
      ],
      form: this.$form.createForm(this, { name: 'advanced_search' }),
      data: [],
      columns,
      isLoading: false, //表格分页加载
      pagination:{
        total:0,
        defaultPageSize:10,
        showTotal: total => `共 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger:true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onChange:(page,pageSize)=>this.getPostsList(page,pageSize),//点击页码事件
      },
      isShowModal: false,
      modalTitle: '',
      modalData: [],
      title: '',
      date: ''
    }
  },
  components: {
    // ActionModal
  },
  created() {
    //帖子分页查询
    this.getPostsList()
  },
  methods: {
    //条件查询列表
    //表单查询
    handleSearch(e) {
      e.preventDefault()
      this.getPostsList()
    },
    //时间
    onChange(dates, dateStrings) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    },
    //获取帖子列表
    getPostsList(pageNum=1, pageSize=20){
      this.isLoading = true
      this.pageNum = pageNum
      let time
      if (this.date) {
        time = JSON.stringify(this.$moment(this.date).format('YYYY-MM-DD'))
      } else {
        time = this.date
      }
      let params = {
        pageNum: pageNum,
        pageSize: pageSize,
        userName: window.localStorage.getItem('userName'),
        postTime: time,
        postTitle: this.title,
        publisher: this.publisher
      }
      getUserPostList(params)
        .then((res) => {
          if (res.status == 200){
            this.data = res.data.list
            this.pagination.total = res.data.total
            this.isLoading = false
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    //删除帖子
    deletePost(item) {
      // let params = {
      //   postId: 10
      // }
      deletePost({postId: item.postId})
          .then((res) => {
            if (res.status == 200){
              this.$message.success('删除帖子成功！')
              this.getPostsList()
            }
            else{
              this.$message.info(res.msg)
            }
          })
    },
    //添加帖子
    addPost() {
      this.$router.push('/post')
    }
    //新增课件
    // addCourseweare(){
    //   this.isShowModal = true
    //   this.modalTitle = '发布课件'
    //   let data = [
    //     {
    //       label: '类型',
    //       name: 'eWorkshop'
    //     },
    //     {
    //       label: '标题',
    //       name: 'eMachine'
    //     },
    //     {
    //       label: '主讲人',
    //       name: 'eName'
    //     },
    //     {
    //       label: '专业',
    //       name: 'eCode'
    //     },
    //     {
    //       label: '封面',
    //       name: 'eType'
    //     },
    //     {
    //       label: '课件上传',
    //       name: 'eType'
    //     },
    //     {
    //       label: '评价',
    //       name: 'eType'
    //     },
    //   ]
    //   this.modalData.createData = data
    // }
  }
}
</script>

<style scoped>
.flex{
  display: flex;
  flex-direction: row;
}
.container{
  width: 1032px;
  height: 100%;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #eeeeee;
  padding: 5px 13px;
}
.contain-header{
  justify-content: space-between;
  align-items: center;
}
.contain-title{
  font-family: MicrosoftYaHei;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #1bcbb4;
}
.contain-left{
  align-items: center;
  cursor: pointer;
}
.add{
  font-family: MicrosoftYaHei;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #54aef2;
  margin-left: 9px;
}
.nav-icon{
  color: #54aef2;
}
.form{
  margin-top: 15px;
}
.tag-page{
  margin-top: 40px;
  text-align: left;
}
.column{
  background-color: #ffffff;
}
.icon-oper{
  font-size: 5px;
  margin-right: 6px;
  margin-left: 10px;
}
.edit{
  color: #12c5f8;
}
.delete{
  color: #f8334f;
}
.shield{
  color: #e8c25b;
}
.disable{
  color: #f733a2;
}
.space-icon{
  margin-top: 10px;
}
.icon-flex{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.img-con{
  width: 100%;
}
.img{
  width: 100%;
  /*height: 57px;*/
}
</style>